<template>
  <div class="order-success">
    <nav-bar title="下单成功"
             bgColor="#eeeeee"></nav-bar>
    <img :src="require('@/assets/image/order/success.png')"
         alt="">
    <span style="color:#e93323;">支付成功</span>
    <span>美酒国际直营店</span>
    <li class="order-success-price">¥<span>58.00</span></li>
    <li class="order-success-bottom">
      <span @click="goOrder">查看订单</span>
      <span @click="lookAround">继续逛逛</span>
    </li>
  </div>
</template>

<script>
import NavBar from '@/components/NavBarSecond'
export default {
  data () {
    return {
    };
  },
  components: {
    NavBar
  },
  created () { },
  methods: {
    goOrder () {
      console.log('查看订单');
    },
    lookAround () {
      console.log('继续逛逛');
    }
  }
}

</script>

<style lang='scss' scoped>
.order-success {
  @include top-page;
  align-items: center;
  background-color: #eeeeee;
  font-size: 0.32rem;
  img {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.5rem;
  }
  > span {
    margin-top: 0.6rem;
    font-weight: 600;
    color: #000000;
  }
  .order-success-price {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    span {
      font-size: 0.6rem;
      margin: 0 0 0.1rem 0.1rem;
    }
  }
  .order-success-bottom {
    margin-top: 20%;
    width: 88%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      width: 3rem;
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      border-radius: 1rem;
      &:first-child {
        border: 1px solid #e85014;
        color: #e85014;
      }
      &:last-child {
        background-color: #e85014;
        color: #ffffff;
      }
    }
  }
}
</style>